{extend name="../../admin/view/main"}

{block name='content'}
<div class="think-box-shadow portal-block-container notselect">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm6 layui-col-md3">
            <div class="portal-block-item nowrap" style="background:linear-gradient(-125deg,#57bdbf,#2f9de2)">
                <div>总重量</div>
                <div>{$weightTotal|default='0'}</div>
                <div>当前总重量</div>
            </div>
            <i class="portal-block-icon layui-icon layui-icon-app"></i>
        </div>
       
        <div class="layui-col-sm6 layui-col-md3">
            <div class="portal-block-item nowrap" style="background:linear-gradient(-141deg,#ecca1b,#f39526)">
                <div>交易金额</div>
                <div>{$amountTotal|default='0'}</div>
                <div>总金额总数</div>
            </div>
            <i class="portal-block-icon layui-icon layui-icon-rmb"></i>
        </div>
    </div>
</div>

<div class="layui-row layui-col-space15 margin-top-10">

    
    <div class="layui-col-xs12 layui-col-md6">
        <div class="think-box-shadow">
            <div id="main4" style="width:100%;height:350px"></div>
        </div>
    </div>
    <div class="layui-col-xs12 layui-col-md6">
        <div class="think-box-shadow">
            <div id="main5" style="width:100%;height:350px"></div>
        </div>
    </div>
    <div class="layui-col-xs12 layui-col-md6">
        <div class="think-box-shadow">
            <div id="main6" style="width:100%;height:350px"></div>
        </div>
    </div>
</div>

<label class="layui-hide">
    <textarea id="jsondata1">{$days|json_encode}</textarea>
</label>

<script>

    require(['echarts'], function (echarts) {
        var data1 = JSON.parse($('#jsondata1').html());
        var days = data1.map(function (item) {
            return item['当天日期'];
        });

       

        (function (charts) {
            window.addEventListener("resize", function () {
                charts.resize()
            });
            charts.setOption({
                title: [{left: 'center', text: '近十天重量增涨趋势'}],
                tooltip: {trigger: 'axis', show: true, axisPointer: {type: 'cross', label: {}}},
                xAxis: [{data: days, gridIndex: 0}],
                yAxis: [
                    {
                        splitLine: {show: true}, gridIndex: 0, type: 'value', axisLabel: {
                            formatter: '{value} 斤'
                        }
                    }
                ],
                grid: [{left: '10%', right: '3%', top: '25%'}],
                series: [
                    {
                        smooth: true, showBackground: true,
                        areaStyle: {color: 'rgba(180, 180, 180, 0.5)'},
                        type: 'line', showSymbol: true, xAxisIndex: 0, yAxisIndex: 0,
                        label: {normal: {position: 'top', formatter: '{c} 斤', show: true}},
                        data: data1.map(function (item) {
                            return item['增加用户'];
                        }),
                    }
                ]
            });
        })(echarts.init(document.getElementById('main4')));

        (function (charts) {
            window.addEventListener("resize", function () {
                charts.resize()
            });
            charts.setOption({
                title: [{left: 'center', text: '近十天金额趋势'}],
                tooltip: {trigger: 'axis', show: true, axisPointer: {type: 'cross', label: {}}},
                xAxis: [{data: days, gridIndex: 0}],
                yAxis: [
                    {
                        splitLine: {show: true}, gridIndex: 0, type: 'value', axisLabel: {
                            formatter: '{value} 元'
                        }
                    }
                ],
                grid: [{left: '10%', right: '3%', top: '25%'}],
                series: [
                    {
                        smooth: true, showBackground: true,
                        areaStyle: {color: 'rgba(180, 180, 180, 0.5)'},
                        type: 'line', showSymbol: true, xAxisIndex: 0, yAxisIndex: 0,
                        label: {normal: {position: 'top', formatter: '{c} 元', show: true}},
                        data: data1.map(function (item) {
                            return item['订单数量'];
                        }),
                    }
                ]
            });
        })(echarts.init(document.getElementById('main5')));
        const labelOption = {
            show: false,
           
        };
        (function (charts) {
            window.addEventListener("resize", function () {
                charts.resize()
            });
            charts.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['总重量', '一级果', '二级果', '三级果']
                },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: { show: false },
                        data: ['07', '08', '09', '10', '11']
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '总重量',
                        type: 'bar',
                        barGap: 0,
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [320, 332, 301, 334, 390]
                    },
                    {
                        name: '一级果',
                        type: 'bar',
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [220, 182, 191, 234, 290]
                    },
                    {
                        name: '二级果',
                        type: 'bar',
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [150, 232, 201, 154, 190]
                    },
                    {
                        name: '三级果',
                        type: 'bar',
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [98, 77, 101, 99, 40]
                    }
                ]
            });
        })(echarts.init(document.getElementById('main6')));

    });
</script>

{/block}
